<template>
  <div class="comment">
    <h3>已有{{ this.count }}条评论</h3>
    <div class="talk-info">
      <div class="user-avater">
        <img :src="user_avater" alt="用户头像" />
      </div>
      <div class="user-detail">
        <textarea
          data-v-27effb30=""
          placeholder="有什么想说的吗..."
          auto-grow=""
          dense=""
          class="comment-textarea"
          id="t0"
        ></textarea>
        <button @click="commentSubmit('t0', 0, 0)">提交</button>
      </div>
    </div>
    <div class="talk-item" v-for="(item, index) in comments" :key="index">
      <div class="talk-info">
        <div class="user-avater">
          <img :src="item.uavater" alt="用户头像" @click="See(item.uaddress)" />
        </div>
        <div class="user-detail">
          <div class="user-nickname">
            <a :href="item.uaddress">{{ item.uname }}</a>
          </div>
          <div class="time">{{ item.actime }}</div>
          <div class="talk-content">
            {{ item.acbody }}
          </div>
          <div class="talk-operation">
            <span class="mouseCursorLink">回复</span>
          </div>
          <div class="talk-info replay">
            <div class="user-avater">
              <img :src="user_avater" alt="用户头像" />
            </div>
            <div class="user-detail">
              <textarea
                data-v-27effb30=""
                placeholder="留下点什么吧..."
                auto-grow=""
                dense=""
                class="comment-textarea"
                :id="'t' + item.aid"
              ></textarea>
              <button
                @click="commentSubmit('t' + item.aid, item.user_id, item.aid)"
              >
                提交
              </button>
            </div>
          </div>
          <div
            class="talk-info"
            v-for="(itemson, index) in item.son"
            :key="index"
          >
            <!-- <transition></transition> -->
            <div class="user-avater">
              <img
                :src="itemson.uavater"
                alt="用户头像"
                @click="See(itemson.uaddress)"
              />
            </div>
            <div class="user-detail">
              <div class="user-nickname">
                <a :href="itemson.uaddress">{{ itemson.uname }}</a>
              </div>
              <div class="time">{{ itemson.actime }}</div>
              <div class="talk-content">
                <a :href="itemson.parent_name">@{{ itemson.parent_name }}</a>
                {{ itemson.acbody }}
              </div>
              <div class="talk-operation">
                <span class="mouseCursorLink">回复</span>
              </div>
              <div class="talk-info replay">
                <div class="user-avater">
                  <img :src="user_avater" alt="用户头像" />
                </div>
                <div class="user-detail">
                  <textarea
                    data-v-27effb30=""
                    placeholder="留下点什么吧..."
                    auto-grow=""
                    dense=""
                    class="comment-textarea"
                    :id="'t' + itemson.aid"
                  ></textarea>
                  <button
                    @click="
                      commentSubmit(
                        't' + itemson.aid,
                        itemson.user_id,
                        item.aid
                      )
                    "
                  >
                    提交
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'

export default {
  name: 'Comment',
  data() {
    return {
      comments: [],
      count: '',
      user_avater:
        'https://static.talkxj.com/photos/0bca52afdb2b9998132355d716390c9f.png',
      user: {},
    }
  },
  methods: {
    getComments() {
      this.$api.article
        .getArticleComment(this.$route.params.id)
        .then((res) => {
          console.log(res)
          this.comments = res.data.data[0]
          res.data.data[1].forEach((v) => {
            this.comments.forEach((m, index) => {
              if (m.aid == v.parent_id) {
                if (!this.comments[index].son) this.comments[index].son = []
                if (m.user_id == v.replay_user_id) {
                  v.parent_name = m.uname
                  v.parent_address = m.uaddress
                }
                this.comments[index].son.push(v)
                return
              }
            })
          })
          this.comments.forEach((v, index) => {
            if (this.comments[index].son) {
              this.comments[index].son.forEach((v1, i) => {
                res.data.data[1].forEach((v2) => {
                  if (v2.user_id == v1.replay_user_id) {
                    // console.log(v1)
                    v1.parent_name = v2.uname
                    v1.parent_address = v2.uaddress
                    this.comments[index].son[i] = v1
                    return
                  }
                })
              })
            }
          })
          // console.log(this.comments)
          this.count = res.data.data[2][0].count
        })
        .catch((err) => {
          console.log(err)
          this.$message({
            message: '???网页怎么出问题了',
            type: 'error',
          })
        })
    },
    letShow() {
      $('span.mouseCursorLink').click(function () {
        // console.log(this)
        if ($(this).parent().next().hasClass('show')) {
          $('div.show').removeClass('show')
        } else {
          $('div.show').removeClass('show')
          $(this).parent().next().toggleClass('show')
        }
      })
    },
    setUser() {
      return this.$store.getters.user
    },
    commentSubmit(btn, uid, pid) {
      // console.log(this.sonMood)
      if (!this.user.id) {
        this.$message.error('请先登录再评论！')
        return
      }
      let text = $(`#${btn}`).val()
      if (!text) {
        this.$message.error('内容不能为空！请输入评论')
        return
      }
      let date = new Date()
      let time = `${date.getFullYear()}/${
        date.getMonth() + 1
      }/${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
      console.log(uid)
      const params = {
        parent_id: pid,
        replay_user_id: uid,
        actime: time,
        acbody: text,
        user_id: this.$store.getters.user.id,
        article_id: this.$route.params.id,
        replay_aid: btn.slice(1),
      }
      console.log(params)

      this.$api.article
        .addArticleComment(params)
        .then((res) => {
          if (res.data.code == 200) {
            this.$message.success('评论成功！')
            setTimeout(() => {
              location.reload()
            }, 500)
          } else {
            this.$message.err('???怎么不能评论啊')
          }
        })
        .catch((err) => {
          console.log(err)
          this.$message({
            message: '???网页怎么出问题了',
            type: 'error',
          })
        })
    },
  },
  created() {
    this.getComments()
    this.user = this.setUser()
    if (this.user.avater) this.user_avater = this.user.avater
  },
  updated() {
    this.letShow()
  },
}
</script>

<style lang="scss" scoped>
.comment {
  background-color: var(--mainContent-bg);
  color: var(--main-color);
  margin: 20px auto;
  padding: 50px;
  width: 100%;
  text-align: left;
  border-radius: 10px;
  > h3 {
    margin-bottom: 1em;
  }
}
.talk-info {
  width: 100%;
  margin-top: 0.5em;
}
.replay {
  height: 0;
  overflow: hidden;
  transition: height 0.3s, box-shadow 0.3s, padding 0.3s;
  padding: 0px;
  border-radius: 5px;
  > .user-detail {
    align-items: flex-end;
  }
}
a {
  color: var(--main-color);
  font-weight: 700;
  transition: color 0.3s;
}
a:hover {
  color: var(--head-color);
}
span {
  color: #008b8b;
}
.show {
  height: 11.5em !important;
  box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.15);
  padding: 10px;
}
.user-detail {
  > button {
    margin: 0 0 0 auto;
  }
}
</style>
